<!DOCTYPE html>
<html class="x-admin-sm">

<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
  <link rel="stylesheet" href="./css/font.css">
  <link rel="stylesheet" href="./css/xadmin.css">
  <link rel="stylesheet" href="./lib/layui/css/layui.css">
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <style>
    .all {
      min-height: calc(100vh - 94px);
      /* width: 100%; */
      position: relative;
      overflow: hidden;
      background: #eaedf1;
      padding: 15px;
    }

    .top {
      display: flex;
      justify-content: space-between;
      min-width: 570px;
      width: 100%;
      /* background-color: pink; */
      min-height: 50px;
    }

    .content {
      display: flex;
      overflow: hidden;
      justify-content: space-between;
      min-width: 570px;
      width: 100%;
      /* background-color: pink; */
      min-height: 50px;
      margin-top: 20px;
    }

    .box {
      height: 90px;
      width: 24%;
      padding-top: 15px;
      border-radius: 5px;
      color: #fff;
      position: relative;
      transition: all .3s linear;
      top: 0;
      overflow: hidden;
      box-sizing: border-box;
    }

    .box-1 {
      background: #fb6d49;
    }

    .box img {
      height: 40px;
      margin-left: 40px;
      margin-right: 20px;
      position: relative;
      top: -12px;
    }

    .box p {
      display: inline-block;
      padding-top: 10px;
      font-size: 16px;
    }

    .box-2 {
      background: #67c23a;
    }

    .box-3 {
      background: #e6a23c;
    }

    .box-4 {
      background: #3a7ce7;
    }





    /* 设置bootstrap版心 */
    .container {
      max-width: 100%;
    }

    /* 设置中间三个盒子的属性 */
    .content .same {
      width: 32.5%;
      min-height: 200px;
      /* background-color: pink; */
    }

    .content .same .title {
      width: 100%;
      background-color: #ddd;
      line-height: 44px;
      box-sizing: border-box;
      padding: 0 15px;
      height: 44px;
      min-height: 0;
    }

    .content .same .title span {
      font-size: 16px;
    }

    .content .same .wenben {
      display: flex;
      line-height: 40px;
      height: 40px;
      border-bottom: 1px dashed #eee;
      font-size: 14px;
    }

    .wenben .wenben_left {
      padding: 0 10px;
      flex: 1;
    }

    .wenben .wenben_mid {
      padding: 0 10px;
      flex: 1;
    }

    .wenben .wenben_right {
      padding: 0 10px;
      flex: 1;
    }

    .wenben div {
      background-color: #fff;
    }

    .graph {
      width: 100%;
      height: 100%;
      background-color: #fff;
    }

    .graph div {
      height: 100% !important;
    }

    .graph canvas {
      height: 100% !important;
    }

    /* 下方布局css */
    #cate-data {
      height: 400px;
      background-color: #fff;
      margin-top: 20px;
      border-radius: 5px;
      padding-right: 150px;
    }
  </style>


  <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>
  <div class="x-nav">
    <span class="layui-breadcrumb">
      <a href="">首页</a>
      <a href="">演示</a>
      <a>
        <cite>导航元素</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
      onclick="location.reload()" title="刷新">
      <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
  </div>

  <div class="all">
    <!-- 上方布局 -->
    <div class="top">
      <div class="box box-1">
        <img src="./upload/admin-icon.5c6774a8.png" alt="">
        <p>管理员用户<br><b>5</b>名</p>
      </div>
      <div class="box box-2">
        <img src="./upload/user-icon.02.png" alt="">
        <p>平台注册用户<br><b>5</b>名</p>
      </div>
      <div class="box box-3">
        <img src="./upload/下载.png" alt="">
        <p>平台文章总数<br><b>5</b>名</p>
      </div>
      <div class="box box-4">
        <img src="./upload/下载 (1).png" alt="">
        <p>广告位 <b>5</b>个 <br>
          广告图 <b>5</b> 张</p>
      </div>
    </div>
    <!-- 中间布局 -->
    <div class="content">
      <div class="newuser same">
        <div class="title">
          <span>最新注册用户</span>
        </div>
        <!-- 中间左边盒子主体内容 -->
        <div class="wenben">
          <div class="wenben_left">二分法</div>
          <div class="wenben_mid">男</div>
          <div class="wenben_right"></div>

        </div>
        <div class="wenben">
          <div class="wenben_left">
            二分法
          </div>
          <div class="wenben_mid">
            男
          </div>
          <div class="wenben_right"></div>
        </div>
        <div class="wenben">
          <div class="wenben_left">
            二分法
          </div>
          <div class="wenben_mid">
            男
          </div>
          <div class="wenben_right"></div>
        </div>
        <div class="wenben">
          <div class="wenben_left">
            二分法
          </div>
          <div class="wenben_mid">
            男
          </div>
          <div class="wenben_right"></div>
        </div>
        <div class="wenben">
          <div class="wenben_left">
            二分法
          </div>
          <div class="wenben_mid">
            男
          </div>
          <div class="wenben_right"></div>
        </div>
        <div class="wenben">
          <div class="wenben_left">
            二分法
          </div>
          <div class="wenben_mid">
            男
          </div>
          <div class="wenben_right"></div>
        </div>
        <div class="wenben">
          <div class="wenben_left">
            二分法
          </div>
          <div class="wenben_mid">
            男
          </div>
          <div class="wenben_right">
            北京市 朝阳区
          </div>
        </div>
      </div>
      <div class="article same">
        <div class="title">
          <span>点赞文章排行</span>
        </div>
        <!-- 中间的中间盒子主体内容 -->
        <div class="wenben">
          <div class="wenben_left">李连杰回忆濒临死亡经历：大小便失禁，愿花100万买氧气包</div>


        </div>
        <div class="wenben">
          <div class="wenben_left">
            李连杰回忆濒临死亡经历：大小便失禁，愿花100万买氧气包
          </div>

        </div>
        <div class="wenben">
          <div class="wenben_left">
            李连杰回忆濒临死亡经历：大小便失禁，愿花100万买氧气包
          </div>

        </div>
        <div class="wenben">
          <div class="wenben_left">
            李连杰回忆濒临死亡经历：大小便失禁，愿花100万买氧气包
          </div>

        </div>
        <div class="wenben">
          <div class="wenben_left">
            李连杰回忆濒临死亡经历：大小便失禁，愿花100万买氧气包
          </div>

        </div>
        <div class="wenben">
          <div class="wenben_left">
            李连杰回忆濒临死亡经历：大小便失禁，愿花100万买氧气包
          </div>

        </div>
        <div class="wenben">
          <div class="wenben_left">
            李连杰回忆濒临死亡经历：大小便失禁，愿花100万买氧气包
          </div>

        </div>
      </div>
      <div class="usergender same">
        <div class="title">
          <span>用户性别分析</span>
          <!-- 中间右边盒子主体内容 -->

        </div>
        <div class="graph" id="graph">
        </div>
      </div>
    </div>
    <!-- 下面布局 -->
    <div id="cate-data"></div>

  </div>




  <script src="./lib/layui/layui.js" charset="utf-8"></script>
  <script type="text/javascript" src="./js/xadmin.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <script src="./js/echarts.min.js"></script>
  <script>
    // 基于准备好的dom，初始化echarts实例
    (function () {
      const myChart = echarts.init(document.getElementById('graph'))
      option = {

        grid: {
          // 距离 上右下左 的距离
          left: '3%',
          right: '4%',
          bottom: '3%',
          // 是否包含文本
          containLabel: true
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['30%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '女性' },
              { value: 735, name: '男性' },
            ]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      // 监听浏览器缩放，图表对象调用缩放resize函数
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    })();

    // 第二个图表
    (function () {
      const myChart = echarts.init(document.getElementById('cate-data'))
      option = {
        title: {
          text: '各分类文章发布数量',
          left: '500px',
          top: '20px',
          color: '#fff'
        },
        xAxis: {
          axisTick: {
            // true意思：图形在刻度中间
            // false意思：图形在刻度之间
            alignWithLabel: true
          },
          type: 'category',
          data: ['时政', '图片', '娱乐', '汽车', '段子', '科技', '时尚', '123', '牛战士']
        },
        yAxis: {
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#999'
          },
          axisLine: {
            show: false
          },
          type: 'value',
          max: 50,
        },
        series: [
          {
            // 柱子宽度
            barWidth: '60%',
            color: 'skyblue',
            data: [30, 35, 42, 41, 39, 38, 24],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      // 监听浏览器缩放，图表对象调用缩放resize函数
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    })
      ();

  </script>
</body>


</html>